﻿<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta name="viewport" content="width=device-width" />

    <!--不使用缓存（方便更新页面时使用）-->
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    
    <title>问题反馈</title>
    <link rel="stylesheet" th:href="@{/css/weui/weui.css}"/>
    <link rel="stylesheet" th:href="@{/css/weui/jquery-weui.css}"/>
    <link rel="stylesheet" th:href="@{/css/school-district/fix.css}">
    <style>
        h2{
            text-align: center;
        }
        img{
            width: 100%;
            height: 120px;
        }

        #showTooltips2{
            background-color: #2d8fe8;
            border-radius: 0.9rem;
        }

        .weui-label {
            display: block;
            width: 105px;
            word-wrap: break-word;
            word-break: break-all;
            text-align: left;
        }

        select, textarea, input[type='text'], input[type='search'], input[type='password'], input[type='datetime'], input[type='datetime-local'], input[type='date'], input[type='month'], input[type='time'], input[type='week'], input[type='number'], input[type='email'], input[type='url'], input[type='tel'], input[type='color'] {
            text-align: right;
        }

        .weui-cell {
            padding: 10px 15px;
            position: relative;
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
            -webkit-box-align: center;
            -webkit-align-items: center;
            align-items: center;
            text-align: center !important;
        }

        .weui-bar__item--on{
            color: #4fa0ef !important;
            border-bottom: 0.1rem solid #4fa0ef;
        }
        .weui-jylx{
            text-align: center;
            padding-top: 10px;
        }
        .jylx{
            width: 90%;
            border: 1px solid #F7F7F7;
            background-color: transparent;
            padding-top: 10px;
            padding-bottom: 10px;
            text-align: left;
            padding-left: 10px;
        }
        .weui-content{
            text-align: center;
            padding-top: 10px;
        }
        .content{
            width: 90%;
            border: 1px solid #F7F7F7;
            background-color: transparent;
            padding-top: 10px;
            padding-bottom: 10px;
            text-align: left;
            padding-left: 10px;
            height: 130px;
        }
        .weui-phone{
            text-align: center;
            padding-bottom: 10px;
        }
        .weui-cell-submit{
            /*padding: 5% 5%;*/
            position: fixed;
            bottom: 3%;
            width: 90%;
            padding-left: 5%;
            padding-right: 5%;
        }
        .weui-btn {
            font-size: 15px;
        }
        .weui-cells {
            margin-top: 0em;
        }
        .weui-cell-list{
            width: 100%;
        }
        .icons_question{
            width: 25px;
            height: 25px;
            padding-top: 8px;
        }
        .weui-cell-list{
            text-align: left !important;
        }
        .weui-cell-list-icons{
            width: 10%;
        }
        .weui-cell-list-content{
            width: 58%;
        }
        .weui-cell-list-time{
            width: 25%;
        }
        .time{
            color: #888;
        }
    </style>

</head>
<body>


<div style="position: absolute;top: 0;">

    <!--<h2>疫情信息征集</h2>-->
    <img style="width: 100%;height: 100%" th:src="@{/img/school-district/home_bg.png}" alt="">
</div>


<!-- 容器 -->
<div class="weui-tab">
    <div class="weui-navbar">
        <a class="weui-navbar__item weui-bar__item--on" onclick="goWt()" id="goWt">
            问题反馈
        </a>
        <a class="weui-navbar__item" onclick="goLs()" id="goLs">
            历史问题
        </a>
    </div>
    <div class="weui-tab__bd">
        <div id="text1" class="weui-tab__bd-item weui-tab__bd-item--active">
<!--            <form id="myForm2" th:object="${userInfo}">-->
            <form id="myForm2">
               <!-- <div class="weui-jylx">
                    <input class="jylx" value="问题反馈" disabled>
                </div>-->
                <div class="weui-content">
                    <textarea class="content"
                              id="content"
                              style="resize: none"
                              placeholder="告诉我们你的意见和建议，所希望看到的改进，或者是你所遇见的问题"></textarea>
                </div>
            <!--    <div class="weui-phone">
                    <input class="jylx" th:field="*{phone}" disabled>
                    <input class="jylx" disabled>
                </div>-->

                <div class="weui-cell-submit">
                    <a class="weui-btn weui-btn_primary" id="showTooltips2" href="javascript:"
                       onclick="submitForm()">提&nbsp;&nbsp;&nbsp;&nbsp;交</a>
                </div>
            </form>
        </div>


        <div id="text2" class="weui-tab__bd-item" style="display: none">
            <div class="weui-cells weui-cells_form" id="ayqQuestionList" style="padding-top: 15%;">


            </div>
        </div>
    </div>
</div>
<script th:inline="javascript">
    var ctx = [[@{/}]];
    var userInfo = [[${userInfo}]];
    var id = [[${id}]];
    var type = [[${type}]];
</script>
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/jquery-weui.js}"></script>
<script th:src="@{/ajax/libs/layer/layer.min.js}"></script>
<script th:src="@{/ruoyi/js/ry-ui.js?v=3.0.0}"></script>
<script type="text/javascript">
    var regex=/[`~@#$%^&*()+<>?:"{},.\/;'[\]]/im;
    $(function () {
        $.ajax({
            url: ctx+'wechat/question/list',
            data : {
                "id": id,
                "type":type,
            },
            type: 'post',
            dataType: "json",
            success: function (result) {
                var content = "";
                for (var i=0;i<result.length;i++){
                    content+='<div class="weui-cell-list weui-cell">';
                    content+='<div class="weui-cell-list-icons">';
                    content+='<img src="/img/icons_question.png" class="icons_question"/></div>';
                    content+='<div class="weui-cell-list-content">'+result[i].content+'</div>';
                    content+='<div class="weui-cell-list-time">';
                    content+='<input class="weui-input time" type="text" readonly="readonly" value='+result[i].createTime+'>';
                    content+='</div></div>';
                }
                $("#ayqQuestionList").html(content)
            }
        });
    })

    function goWt() {
        $("#text1").show();
        $("#text2").hide();
        $("#goWt").addClass("weui-bar__item--on");
        $("#goLs").removeClass("weui-bar__item--on");
    }

    function goLs() {
        $("#text1").hide();
        $("#text2").show();
        $("#goWt").removeClass("weui-bar__item--on");
        $("#goLs").addClass("weui-bar__item--on");
    }

    function submitForm() {
        var content = $("#content").val()
        if (content == "" || content == null) {
            $.modal.msgError("请输入意见");
            return false;
        }
        if(regex.test(content)){
            $.modal.msgError("反馈意见包含非法字符");
            return;
        }

        var ayqQuestion = {
            userId:userInfo.id,
            name:userInfo.name,
            street:userInfo.street,
            community:userInfo.community,
            village:userInfo.village,
            userPhone:userInfo.phone,
            createBy:userInfo.name,
            createTime:new Date(),
            content: content,
            type: type,
        }
        $.showLoading("正在提交...");
        $.ajax({
            url: ctx+'wechat/question/add',
            data: ayqQuestion,
            type: 'post',
            dataType: "json",
            success: function (result) {
                if (result.code == web_status.SUCCESS) {
                    $.modal.msgSuccess(result.msg);
                    window.location.reload();
                } else {
                    $.modal.msgError(result.msg);
                }
            }
        });
    }
</script>
</body>
</html>
